<template>
  <div>
    <div class="common_title">
        <span style="font-size:20px;font-weight:bold">部门管理</span>
      </div>
    <!-- 查询框 -->
    <div class="query_bg">
        <span class="query_bg_username">
          <el-input placeholder="部门名称" v-model="input" :size="size" style="width:200px"> </el-input>
        </span>
        <span class="query_bg_button" style="margin-left:20px">
          <el-button type="goon" icon="el-icon-search" :size="size" @click="queryByName">查询</el-button>
        </span>
        <span class="query_bg_addData" style="margin-left:20px">
            <el-button type="goon" icon="el-icon-plus" @click="addDeptClick" :size="size">新增</el-button>
        </span>
        <div class="grid-content bg-purple-light"></div>
    </div>
    <!-- <hr style='border:0.5px inset #FAFAFA;'> -->
    <!-- 数据列表框 -->
    <div  class="dataList_bg">
      <div class="dataList">
        <el-table ref="multipleTable" :size="size" :data="tableData" tooltip-effect="dark" style="width: 100%" :default-sort = "{prop: 'id', order: 'descending'}" @row-click="openDetails">
          <el-table-column header-align="center" align="center" width="80" label="序号" sortable>
            <template slot-scope="scope">
              <span>{{(page - 1) * perPage + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="deptName" header-align="center" align="center" width="150" label="部门名称"></el-table-column>
          <el-table-column prop="deptHead" header-align="center" align="center" width="120" label="负责人"></el-table-column>
          <el-table-column prop="deptIntroduce" header-align="center" align="center" label="部门简介"></el-table-column>
          <el-table-column prop="deptAdd" header-align="center" align="center" label="部门地址"></el-table-column>
          <el-table-column prop="deptTel" header-align="center" align="center" label="电话"></el-table-column>
          <el-table-column prop="" label="操作" width="300" show-overflow-tooltip header-align="center" align="center">
              <template slot-scope="scope">
                  <el-button round size="mini" @click.native.stop="editDeptClick(scope.row)">编辑</el-button>
                  <el-button type="danger" round size="mini" @click.native.stop="deleteDeptClick(scope.row)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block" style="width:100%;text-align:right;margin-top:10px">
          <el-pagination @size-change="handleperPageChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 50]"
          :page-size="perPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          ></el-pagination>
      </div>
      <!-- 新增/编辑界面 -->
      <el-dialog :title="operation ? '新增' : '编辑'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitForm()" label-width="80px" :size="size" style="text-align:left;">
              <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="dataForm.deptName" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="负责人" prop="deptHead">
              <el-input v-model="dataForm.deptHead" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="部门简介" prop="deptIntroduce">
              <el-input type='textarea' v-model="dataForm.deptIntroduce" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="部门地址" prop="deptAdd">
              <el-input v-model="dataForm.deptAdd" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="部门电话" prop="deptTel">
              <el-input v-model="dataForm.deptTel" placeholder="请输入"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button :size="size" @click="dialogVisible = false">取消</el-button>
              <el-button :size="size" type="primary" @click="submitForm()">提交</el-button>
          </span>
      </el-dialog>
      <!-- 详情界面 -->
      <el-dialog :visible.sync="detailVisible" width="40%" center>
        <div slot="title" class="dialog-title"> 部门详情 </div>
        <div style="text-align:left;margin-bottom:18px">
          <label style="display:inline-block;width:80px;margin-left:20px;color:#909399;font-weight:700">ID:</label>
          <span style="margin-left: 20px;">{{deptDetails.deptId}}</span>
        </div>
        <div style="text-align:left;margin-bottom:18px">
          <label style="display:inline-block;width: 80px;margin-left:20px;color:#909399;font-weight:700">部门名称:</label>
          <span style="margin-left: 20px;">{{deptDetails.deptName}}</span>
        </div>
        <div style="text-align:left;margin-bottom:18px">
          <label style="display:inline-block;width: 80px;margin-left:20px;color:#909399;font-weight:700">负责人:</label>
          <span style="margin-left: 20px;">{{deptDetails.deptHead}}</span>
        </div>
        <div style="text-align:left;margin-bottom:18px">
          <label style="display:inline-block;width: 80px;margin-left:20px;color:#909399;font-weight:700">部门简介:</label>
          <span style="margin-left: 20px;">{{deptDetails.deptIntroduce}}</span>
        </div>
        <div style="text-align:left;margin-bottom:18px">
          <label style="display:inline-block;width: 80px;margin-left:20px;color:#909399;font-weight:700">部门地址:</label>
          <span style="margin-left: 20px;">{{deptDetails.deptAdd}}</span>
        </div>
        <div style="text-align:left;margin-bottom:18px">
          <label style="display:inline-block;width: 80px;margin-left:20px;color:#909399;font-weight:700">部门电话:</label>
          <span style="margin-left: 20px;">{{deptDetails.deptTel}}</span>
        </div>
        <div style="text-align:left;margin-bottom:18px">
          <label style="display:inline-block;width: 80px;margin-left:20px;color:#909399;font-weight:700">部门人员:</label>
          <span
            style="margin-left: 20px;"
            v-for="(item,index) in deptDetails.userList"
            :key="index"
          >{{item.userName}}</span>
        </div>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="detailVisible = false">确 定</el-button>
        </div> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      size: "small",
      input: '',
      page: 1, //当前页
      perPage: 10, //每页多少条数据
      total: 4, //总共多少条数据
      startUseValue:true,
      tableData: [],
      multipleSelection: [],
      dialogVisible: false,
      operation: true, //true 新增,false 修改
      dataForm: {
        deptName: "",
        deptHead: "",
        deptIntroduce: "",
        deptAdd: "",
        deptTel: ""
      },
      dataRule: {
        deptName: [{ required: true, message: "部门名称不能为空", trigger: "change" }],
        deptHead: [{ required: true, message: "部门负责人不能为空", trigger: "change" }],
        deptAdd: [{ required: true, message: "部门地址不能为空", trigger: "change" }],
      },
      detailVisible: false, //详情界面
      deptDetails: [],
    }
  },
  methods: {
    //展示部门详情
    openDetails(row) {
      console.log(row);
      this.detailVisible = true;
      this.$api.dept.queryDetail(row.deptId).then(res => {
        this.deptDetails = res.data;
        console.log(res.data);
      });
    },
    // 获取总量
    getCount: function() {
      this.$api.dept.count().then(res => {
        this.total = res.data.totalSize;
      });
    },
    // 获取数据
    findTreeData: function() {
      this.$api.dept.findByPage(this.page,this.perPage).then(res => {
        this.tableData = res.data.deptList;
        console.log(this.tableData);
      });
    },
    //按部门名称搜索
    queryByName: function() {
      if(this.input){
        this.$api.dept.queryByName(this.input).then(res => {
        this.tableData = res.data;
        this.total = this.tableData.length;
      });
      }
      else{
        this.findTreeData();
        this.getCount();
      }
    },
    //改变每页多少条数据
    handleperPageChange(val) {
      this.perPage = val
      this.findTreeData()
    },
    // 分页查询
    handleCurrentChange(val) {
      this.page = val
      this.findTreeData()
    },
    // 新增
    addDeptClick() {
      this.dialogVisible = true;
      this.operation = true;
      this.dataForm = {
          deptName: "",
          deptHead: "",
          deptIntroduce: "",
          deptAdd: "",
          deptTel: ""
      };
    },
    // 编辑
    editDeptClick(row) {
      this.dialogVisible = true;
      this.operation = false;
      console.log(row);
      this.dataForm = Object.assign({}, row);
    },
    // 删除
    deleteDeptClick(row) {
      this.$confirm("确认删除选中部门信息吗？", "提示", {
        type: "warning"
      }).then(() => {
        console.log(row)
        this.$api.dept.deleteDept(row.deptId).then(res => {
          this.findTreeData();
          this.getCount()
          this.$message({ message: "删除成功", type: "success" });
          console.log(res);
        });
      }).catch(() => {});
    },
    // 表单提交
    submitForm() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            console.log(params)
            if (this.operation) {
              this.$api.dept.addDept(params).then(res => {
                this.editLoading = false;
                if (res.code == 200) {
                  this.$message({ message: "操作成功", type: "success" });
                  this.dialogVisible = false;
                  this.$refs["dataForm"].resetFields();
                  console.log(res);
                } else {
                  this.$message({
                    message: "操作失败, " + res.msg,
                    type: "error"
                  });
                }
                this.findTreeData();
                this.getCount();
              });
            } else {
              this.$api.dept.updateDept(params).then(res => {
                this.editLoading = false;
                if (res.code == 200) {
                  this.$message({ message: "操作成功", type: "success" });
                  this.dialogVisible = false;
                  this.$refs["dataForm"].resetFields();
                  console.log(res);
                } else {
                  this.$message({
                    message: "操作失败, " + res.msg,
                    type: "error"
                  });
                }
                this.findTreeData();
                this.getCount();
              });
            }
          });
        }
      });
    },
  },
  mounted() {
    this.getCount();
    this.findTreeData();
  }
}
</script>

<style lang="less" scoped>
.common_title {
    margin-top: 20px;
}
.query_bg {
    height: 80px;
    line-height: 80px;
    margin-top: 10px;
    //   background-color: hotpink;
    .el-button--goon {
      color: #FFF;
      background-color: #37508D;
      border-color: #37508D;
    }
    .el-input, .el-select {
        width: 140px;
    }
}
.dataList_bg {
      height: 90%;
      margin-top: 5px;
    //   background-color: lawngreen;

    .dialog-title {
      font-size: 20px;
      font-weight: 700;
      overflow: hidden;
      color: rgb(36, 34, 34);
    }
}
</style>
